<template>
	<view class="message">
		<u-tabs :list="list" :is-scroll="false" :current="current" :active-color='themeColorLight' @change="change"></u-tabs>
		<view class="message-main" v-show="current===0&&listData.length">
			<view v-for="(item,index) in listData" :key="index" class="card" style="margin-top: 10rpx;">
				<view class="title u-border-bottom">
					<view class="left">
						<text class="huibiao" v-if="item.isReaded===0"></text>
						<text class="iconfont icon-xiaoxi1"></text>
						<text style="font-size: 14px; color: #00AE00;">{{item.msgTypeName||'通知'}}</text>
					</view>
					<view class="right">
						{{item.createTime||''}}
					</view>
				</view>
				<view class="flexR">
					<view class="main-left">
						<checkbox-group @change="handleChecked($event,index)">
							<checkbox :value="true" :checked="item.checked" />
						</checkbox-group>
					</view>
					<view class="main flexR" style="align-items: flex-start;">
						<view class="left">
							<template v-for="(cItem, i) in item.objKey">
								<view class="row" :key='cItem' >
									<text>{{cItem==='title'?'标题':cItem}}：</text>{{item.msgObj[cItem]||''}}
								</view>
							</template>
						</view>
						<view class="right" @click="toPage(item, index)" style="line-height: 25px;">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="message-btn flexR" v-show="current===0 && listData.length">
			<view class="message-btn-left flexR">
				<checkbox-group @change="handleChecked($event,'all')">
					<label class="flexR" style="align-items: center;">
						<checkbox :value="true" :checked="allChecked"/><text>全选</text>
					</label>
				</checkbox-group>
			</view>
			<view class="message-btn-right flexR" style="background-color:#fcbd71;" @click="toDelete('read')">
				<text class="iconfont icon-ziyuan140"></text>
				<text>{{allChecked?'全部':''}}一键已读</text>
			</view>
			<view class="message-btn-right flexR" @click="toDelete('del')">
				<text class="iconfont icon-shanchu"></text>
				<text>{{allChecked?'全部':''}}删除</text>
			</view>
		</view>
		<view style="height: calc(100vh - 90rpx);margin-top: 10rpx;background-color: #FFF;" v-show="listData.length===0&&current===0">
			<u-empty text='暂无消息通知' mode="list"></u-empty>
		</view>
		<view class="message-setting" v-show="current===1">
			<view v-for="(item,index) in setList" :key="index" class="flexR u-border-bottom">
				<text>{{item.msgName||''}}</text>
				<u-switch v-model="item.opened" :active-value='0' :inactive-value='1' @change="onCheck($event, item)" :active-color="themeColorLight"></u-switch>
			</view>
		</view>
		<Load :load="load" />
	</view>
</template>

<script>
	import { themeColorLight } from '@/static/js/theme.js'
	import { getMsgList, poMsgList, getSwitchList, poSwitchList } from '@/api/otherService.js'
	import Load from '@/components/Load/index.vue'
	import { mapGetters } from 'vuex' 
	export default {
		components:{ Load },
		data() {
			return {
				listData:[],
				allChecked:false,
				list:[{name:'消息列表'},{name:'消息开关'}],
				current:0,
				themeColorLight,
				setList:[],
				load:true,
				setLoad:false
			}
		},
		async onLoad(){
			await this.$onLaunched
			this.initData()
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		methods: {
			initData(){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				this.load = true
				let params = {
					patientId: this.userInfo.patId 
				}
				if(this.current===0){
					getMsgList(params).then(data => {
						this.load = false
						let res = data||[]
						res.forEach(item => {
							item.checked = false
							if(item.msgContent){
								item.msgObj = JSON.parse(item.msgContent);
								delete item.msgObj.memo
								delete item.msgObj.title
								let arr = Object.keys(item.msgObj)
								if(arr.length>3){
									arr = arr.slice(0, 3)
								}
								item.objKey = arr
							}else{
								item.msgObj = ''
							}
						})
						this.listData = res
					}).catch(e => {
						this.load = false
						this.listData = []
					})
				}else{
					getSwitchList(params).then(data => {
						this.load = false
						let res = data||[]
						res.forEach(item => {
							item.opened = item.status===0?true:false
						})
						this.setList = res
					}).catch(e => {
						this.load = false
						this.setList = []
					})
				}
			},
			toDelete(type){
				let readIds=[], delIds=[],flag = false, params={}
				this.listData.forEach(item => {
					if(item.checked){
						flag = true
						delIds.push(item.id)
						if(item.isReaded===0){
							readIds.push(item.id)
						}
					}
				})
				if(type==='read'){
					if(!flag){
						this.$u.toast('请选择需要一键已读的消息')
						return
					}else{
						if(!readIds.length){
							this.$u.toast('所选消息已读')
							return 
						}
						params.ids = readIds
						params.status = 2
					}
					
				}else{
					if(!delIds.length){
						this.$u.toast('请选择需要删除的消息')
						return
					}
					params.ids = delIds
					params.status = 1
				}
				this.load = true
				poMsgList(params).then(data => {
					this.load = false
					this.initData()
				}).catch(e => {
					this.load = false
				})
			},
			handleChecked(e,type){
				let res = e.detail.value
				if(!res) return false
				if(type==='all'){
					this.listData.forEach(item => {
						item.checked = res[0]===true?true:false
					})
					this.allChecked = res[0]===true?true:false
				}else{
					this.listData[type].checked = res[0]===true?true:false
					let flag = false
					this.listData.forEach(item => {
						if(!item.checked){
							flag = true
						}
					})
					this.allChecked = flag?false:true
				}
			},
			change(val){
				this.current = val
				this.initData()
			},
			onCheck(val, item){
				console.log(val, item)
				let params = {
					patientId: this.userInfo.patId,
					msgName:item.msgName,
					msgType:item.msgType,
					status:val
				}
				// #ifdef MP-ALIPAY
				params.status = val===1?0:1
				// #endif
				this.load = true
				poSwitchList(params).then(data => {
					this.load = false
				}).catch(e => {
					this.load = false
				})
			},
			toPage(item, index){
				if(item.isReaded===0){
					this.load = true
					let params = {
						ids:[item.id],
						status:2
					}
					poMsgList(params).then(data => {
						this.load = false
						this.listData[index].isReaded = 1
						uni.navigateTo({
							url:'/pages/Personal/Message/detail?data='+JSON.stringify(item)
						})
					}).catch(e => {
						this.load = false
					})
				}else{
					uni.navigateTo({
						url:'/pages/Personal/Message/detail?data='+JSON.stringify(item)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message{
		&-main{
			height: calc(100vh - 110rpx - 10rpx - 80rpx);
			overflow: scroll;
			.main-left{
				padding-top: 36rpx;
				padding-left: 30rpx;
				checkbox{
					transform: scale(0.7);
				}
			}
			.main{
				flex: 1;
			}
			>.card >.title{
				position: relative;
			}
		}
		&-btn{
			height: 110rpx;
			margin-top: 10rpx;
			align-items: center;
			box-shadow: 0 3px 3px 3px rgba($color: #000000, $alpha: 0.12);
			&-left{
				height: 110rpx;
				flex: 1;
				background-color: $uni-bg-color;
				color: $text-color;
				font-size: 12px;
				align-items: center;
				justify-content: flex-start;
				padding-left: 30rpx;
				checkbox{
					transform: scale(0.7);
				}
			}
			&-right{
				height: 110rpx;
				width: 250rpx;
				background-color: #FF8125;
				color: $text-color-fff;
				font-size: 12px;
				align-items: center;
				justify-content: center;
				>text{
					margin-right: 10rpx;
				}
			}
		}
		&-setting{
			height: calc(100vh - 80rpx - 10rpx);
			margin-top: 10rpx;
			overflow: scroll;
			background-color: #fff;
			.flexR{
				padding: 20rpx 30rpx;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
